<template>
  <div class="flex items-center">
    <div v-show="!focused" class="pl-10">
      <n-button @click="handleRandomContent" quaternary circle>
        <TextIcon :size="30" tip="随机问题" icon="game-icons:perspective-dice-six-faces-random"></TextIcon>
      </n-button>
    </div>
    <div class="relative flex ml-auto transition-all px-5" :class="focused?'w-full':'w-10/12'">
      <n-input
          ref="inputRef"
          @keydown="keydown"
          size="large"
          v-model:value="content"
          type="textarea"
          placeholder="Enter发送，Shift+Enter换行"
          :autosize="{
        minRows: 1,
        maxRows: 8}"></n-input>
      <div class="absolute right-5 bottom-0 mx-3 mb-1.5">
        <n-button text @click.stop="handleSend">
          <TextIcon icon="fa:send"></TextIcon>
        </n-button>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">


import {ref} from "vue";
import {useAiStore} from "@/store";
import TextIcon from "@/components/pc/icon/TextIcon.vue";
import {useFocusWithin} from "@vueuse/core";


const aiStore = useAiStore()
const content = ref('')
const inputRef = ref()
const {focused} = useFocusWithin(inputRef)
const emits = defineEmits(['handleSend'])


const handleSend = () => {
  if (!content.value) {
    window.$message.warning('请输入内容')
    return
  }
  aiStore.sendMessage(content.value)
  emits('handleSend')
  content.value = ''
}
const keydown = (e: any) => {
  if (!e.shiftKey && e.keyCode == 13) {
    e.cancelBubble = true; //ie阻止冒泡行为
    e.stopPropagation();//Firefox阻止冒泡行为
    e.preventDefault(); //取消事件的默认动作*换行
    handleSend()
  }
}

const handleRandomContent = () => {
  let contentList = [
    '今天北京的天气如何？',
    '《复仇者联盟4》什么时候上映？',
    '法国的首都是哪里？',
    '法国的人口数量是多少？',
    '《哈利波特》的作者是谁？',
    '纽约的时区是什么？',
    '你看过《阿甘正传》吗？如果看过，你觉得它怎么样？',
    '怎样学习和掌握英语语法?',
    '如何制作一道巧克力蛋糕？',
    '世界上最大的河流是哪条？',
    '有什么方法可以提高学习效率和记忆力？',
    '如何管理时间以平衡工作和个人生活？',
    '谈谈克服拖延症的方法和技巧。',
    '如何保持心理健康和应对压力？',
    '介绍一下常见的心血管疾病和预防方法。',
    '什么是健康饮食的基本原则？',
    '推荐一些适合家庭旅行的目的地。',
    '解释一下密码学和加密算法的基本概念。',
    '介绍一种流行的编程语言及其主要用途。',
    '什么是人工智能？它如何应用于现实生活中？',
    '如何计算一个三角形的面积？',
    '解释一下质数和合数的区别。',
    '简要解释一下概率和统计的基本概念。',
    '提供一个关于进化论和自然选择的例子。',
    '描述一下原子结构和亚原子粒子的组成。',
  ]
  content.value = contentList[Math.floor(Math.random() * contentList.length)]
}

const inputFocus = () => {
  inputRef.value.focus()
}

const doInputFocus = () => {
  inputFocus()
}

defineExpose({
  doInputFocus
})

</script>

<style scoped>

</style>